<style>
	.headimgurl { width: 120px; height: 120px; border-radius: 5px; box-shadow: 2px 2px 6px darkgrey; margin-right: 40px;}
	.userinfo {  }
	.infoes { width:  calc(100% - 140px);  font-size: 14px;  }
	.infoes .line { width: 100%; height: 24px; justify-content: flex-start;}
	.infoes label { font-weight: bolder;}
	.infoes .line > div { width: 180px; margin-left: 40px;}
	.v-table-row td { background: none; height: 24px;}
	.v-table-row:nth-child(even) td   { background: none;}

</style>
<section>
	<div id='vm2'>
		<h4 class="pagetitle">快快学员健身履历</h4>
		<!-- <h4 class="pagetitle">{{username}} (昵称：{{nickname}}，ID：{{userid}})</h4> -->
		<hr>
		<div class="usserinfo line">
			<div class="headimgurl" v-if="userinfo.headimgurl " :style="'background: url(' + userinfo.headimgurl + '); background-size: 100% 100%;'"></div>
			<div class="infoes">
				<div class="line">
					<div><label>姓名：</label>{{userinfo.real_name}}</div> 
					<div><label>性别：</label>{{userinfo.sex == 1 ? '男' : '女'}}</div>
					<div><label>昵称：</label>{{userinfo.name}}</div>
					<div><label>ID：</label>{{userinfo.user_code}}</div>
				</div>
				<div class="line">

					<div><label>年龄：</label>{{userinfo.age}}</div>
					<div><label>生日：</label>{{userinfo.birthday}}</div>
					<div><label>电话：</label>{{userinfo.tele}}</div>
				</div>
				<div class="line">
					<div><label>最初体重：</label>{{userinfo.init_weight}}kg</div>
					<div><label>最初体脂率：</label>{{userinfo.init_fat_rate}}%</div>
					<div><label>最初BMI：</label>{{Math.round(userinfo.init_weight / userinfo.height / userinfo.height * 1000000) / 100}}</div>
					<div><label>身高：</label>{{userinfo.height}}cm</div> 
				</div>
				<div class="line">
					<div><label>当前体重：</label>{{userinfo.weight}}kg</div>
					<div><label>当前体脂率：</label>{{userinfo.fat_rate}}%</div>
					<div><label>当前BMI：</label>{{Math.round(userinfo.weight / userinfo.height / userinfo.height * 1000000) / 100}}</div>
				</div>	
				<div class="line">
					<div><label>总购课金额：</label>{{userinfo.all_pay_fee}}</div>
					<div><label>总购课次数：</label>{{userinfo.all_times}}</div>
					<div><label>总赠课次数：</label>{{userinfo.all_gift_times}}</div>
					<div><label>总上课次数：</label>{{userinfo.use_times}}</div>
				</div>
				<div class="line" >
					<div><label>私海归属教练：</label>{{userinfo.coachname}}</div>
					<div style="width: 600px;"><label>私海归属门店：</label>{{userinfo.gymname}}</div>

				</div>	
			</div>
		</div>
		<div class="infoes">
			
		</div>
		<hr>
		<h4 class="pagetitle">签约/赠课情况</h4>
		<v-table
			:height="350" is-horizontal-resize
			column-width-drag
			style="width:100%; max-height: 350px;"
			:columns="ordersColumns"
			:table-data="ordersDatas"
			row-hover-color="#fdd"
			row-click-color="#ade7ef"
			:row-click="selectChange"
		></v-table>
		<h4 class="pagetitle" v-if="classesDatas.length > 0">上课/调课情况</h4>
		<v-table v-if="classesDatas.length > 0"
			:height="400" is-horizontal-resize
			style="width:100%; height: 400px;"
			:columns="classesColumns"
			:table-data="classesDatas"
		
		></v-table>
		
	</div>
</section>
<script>
	// D.userid = 1785528;   // 福州学员, 昵称布衣雪, 上课次数在700次以上
	
	const free_types = ['', '转介绍', '免费体验卡', '市场活动', '体验失败', '内部员工', '公关赠送', 'Another', '买课赠课', '闭店补偿', '门店服务补偿', '感恩节', '门店活动', '13', '14'];
	const classes_types = ['', '小班课', '私教课', '防暴课', '搏击课', '主题课'];
	const classes_status = ['正常上课', '调课/取消', '补课', '已补课']
	var vm2 = new Vue({
		el: '#vm2',
		data: {
			userinfo: { headimgurl: ''},
			userid: C.userid,
			user_subject_uuid: '',
			ordersColumns: [
				{field: "sort", title: "序号", width: 40, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "create_time", title: "签约/赠课时间", width: 200, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "all_times", title: "购课/赠课节数", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "use_times", title: "上课节数", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "free_type", title: "购课/赠课原因", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){return d.free_type==0 ? '购课':free_types[d.free_type]}},
				{field: "deal_price", title: "标准售价", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "pay_fee", title: "实付款", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){return Math.round(d.pay_fee * 100) / 100} },
				{field: "coins_pay", title: "橙V付", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){return Math.round(d.coins_pay * 100) / 100} },
				{field: "coupon_fee", title: "券付", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){return Math.round(d.coupon_fee * 100) / 100} },
				{field: "payment_no", title: "合同号", width: 300, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "gymname", title: "签约门店", width: 200, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){return d.free_type>0 ? '':d.gymname }},
				{field: "coachname", title: "销售人", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true},
				{field: "is_local", title: "限制门店", width: 200, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){return d.is_local == 1 ? d.gymname : ''}},
				{field: "pool_gymname", title: "私海门店", width: 200, titleAlign: 'center', columnAlign:'center', isResize:true},
				{field: "pool_coachname", title: "私海教练", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true},
				{field: "remarks", title: "备注", width: 500, titleAlign: 'center', columnAlign:'center', isResize:true},
				{field: "", title: "", width: 10, titleAlign: 'center', columnAlign:'center', isResize:true},
			],
			ordersDatas: [],
			ordersfooter: [],
			footerheight: 40,
			classesColumns: [
				{field: "sort", title: "序号", width: 40, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "pretime", title: "预订时间", width: 160, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "gymname", title: "上课门店", width: 200, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "start_time", title: "上课时间", width: 160, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "coachname", title: "上课教练", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "classes_times", title: "课程节次", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "classes_type", title: "课程类型", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){ return classes_types[d.classes_type]} },
				{field: "capacity", title: "最大人数", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "enroll_number", title: "上课人数", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "ifchangeclasses", title: "是否上课", width: 100, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){ return classes_status[d.ifchangeclasses]} },
				{field: "has_checkin", title: "是否签到", width: 80, titleAlign: 'center', columnAlign:'center', isResize:true, formatter: function(d){ return d.has_checkin == 1?'已签到':''} },
				{field: "subjectname", title: "科目", width: 160, titleAlign: 'center', columnAlign:'center', isResize:true, },
				{field: "coursename", title: "课程", width: 200, titleAlign: 'center', columnAlign:'center', isResize:true, },
			],
			classesDatas: [],
		},
		methods: {
			selectChange(i, d, c){  // i: 选择的行序数; d: 选择的行的数据; c: 点击的列对像
				console.log(i, d, c)
				let that = this;
				this.user_subject_uuid = d.uuid;
				post(dataDomain + "data/post.php/ksap/users/user_classes", {"user_subject_uuid": this.user_subject_uuid}, function(r){
					for (let i in r.data){
						r.data[i].sort = Number(i) + 1
					}
					that.classesDatas = r.data;
				})
			}
			
		},
		mounted: function(){
			let that = this;
			post(dataDomain + "data/post.php/ksap/users/user_info", {"userid": D.userid}, function(r){
				console.log(r)
				that.userinfo = $.extend(true, that.userinfo, r.data[0]);
			})
			post(dataDomain + "data/post.php/ksap/users/user_subjtct", {"userid": D.userid}, function(r){
				console.log(r);
				let userinfo = {
					all_times: 0,
					all_pay_fee: 0,
					all_gift_times: 0,
					use_times: 0,
				};
				for(let i in r.data){
					r.data[i].sort = Number(i) + 1
					userinfo.use_times += Number(r.data[i].use_times);
					userinfo.all_pay_fee += Number(r.data[i].deal_price);
					if(r.data[i].free_type > 0) userinfo.all_gift_times += Number(r.data[i].all_times);
					if(r.data[i].free_type == 0) userinfo.all_times += Number(r.data[i].all_times);
				}
				that.ordersDatas = r.data
				console.log(userinfo)
				$.extend(true, that.userinfo, userinfo);
			})
		}
	})
	
	
</script>